<template>
	<el-form :inline="true" :model="formMode" size="small" label-position="right">
		<el-form-item label="显示按钮">
			<el-switch v-model="formMode.showBtn" inline-prompt active-text="是" inactive-text="否" @change="handleChange('form')" />
		</el-form-item>

		<el-form-item label="显示重置按钮">
			<el-switch v-model="formMode.showReset" inline-prompt active-text="是" inactive-text="否" @change="handleChange('form')" />
		</el-form-item>
		<el-form-item label="提交按钮名称">
			<el-input v-model="formMode.submitBtnText" placeholder="请输入" clearable @change="handleChange('form')" />
		</el-form-item>
		<el-form-item label="返回按钮名称">
			<el-input v-model="formMode.backBtnText" placeholder="请输入" clearable @change="handleChange('form')" />
		</el-form-item>
		<el-form-item label="对齐方式">
			<el-radio-group v-model="formMode.labelPosition">
				<el-radio-button value="left" label="左"></el-radio-button>
				<el-radio-button value="right" label="右"></el-radio-button>
				<el-radio-button value="top" label="顶部"></el-radio-button>
			</el-radio-group>
		</el-form-item>
		<el-form-item label="行内表单">
			<el-switch v-model="formMode.inline" inline-prompt active-text="是" inactive-text="否" @change="handleChange('form')" />
		</el-form-item>
	</el-form>
</template>

<script setup lang="ts">
import { useDesign } from '@/stores/design'
const store = useDesign()
const { widgetFormConfig } = storeToRefs(store)

const formMode: any = ref(widgetFormConfig.value)
const handleChange = (type) => {
	store.setWidgetFormConfig(formMode.value)
}
</script>

<style scoped></style>
